<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		useRouter,
		useRoute
	} from 'vue-router'

	const router = useRouter()
	const route = useRoute()

	const tableData = ref([{
		name: 'xabntih.cn',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: '190vip',
		holding_status: 0,
		transaction_status: 0,
		remark: '自用'
	}, {
		name: 'nazhuai.cn',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: '190vip',
		holding_status: 1,
		transaction_status: 1,
		remark: '被预约了'
	}, {
		name: 'fjcrnjh.cn',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: '190vip',
		holding_status: 2,
		transaction_status: 2,
		remark: '给公司用'
	}, {
		name: 'fuzhuangren.com.cn',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: '190vip',
		holding_status: 3,
		transaction_status: 3,
		remark: '不需要了'
	}, {
		name: 'mashuang.com',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: '190vip',
		holding_status: 4,
		transaction_status: 4,
		remark: '不需要了'
	}, {
		name: 'nazhuai.com.cn',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: '190vip',
		holding_status: 5,
		transaction_status: 5,
		remark: '备注11'
	}, {
		name: 'fjcrnjh.com.cn',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: 'ename',
		holding_status: 4,
		transaction_status: 6,
		remark: '最多有几个字'
	}, {
		name: 'fuzhuangren.com',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: 'tencent',
		holding_status: 2,
		transaction_status: 7,
		remark: '外部dns'
	}, {
		name: 'mashuang.com.cn',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: 'xw',
		holding_status: 1,
		transaction_status: 6,
		remark: ''
	}, {
		name: 'xabntih.com.cn',
		reg_time: '2023-11-04',
		end_time: '2023-11-04',
		registrar: 'xw',
		holding_status: 0,
		transaction_status: 5,
		remark: ''
	}])

	const placeholder = "查找域名/后缀 如：.cn \r多个域名/后缀用换行分隔"

	const dmName = ref(false)

	const dmFocus = () => {
		dmName.value = true
	}
	const dmBlur = () => {
		dmName.value = false
	}
	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const form = reactive({})

	const multipleSelection = ref([])

	const currentPage = ref(1)
	const total = 1000

	const reset = () => {
		form.date = ''
		form.template = ''
		form.registrar = ''
		form.holding_status = ''
		form.transaction_status = ''
	}


	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const inputValidator = (val) => {
		console.log(val)
		var reg = /[a-z0-9\u4E00-\u9FFF]\d{20,}/
		return !reg.test(val)
	}

	const handleRemark = (row, index) => {
		ElMessageBox.prompt('', '修改备注', {
				confirmButtonText: '确 定',
				cancelButtonText: '取 消',
				inputPlaceholder: '请输入备注',
				inputValue: row.remark,
				inputValidator: inputValidator,
				inputErrorMessage: '超出20字符不可输入',
			})
			.then(({
				value
			}) => {
				row.remark = value
				ElMessage({
					type: 'success',
					message: `修改成功！`,
				})
			})
			.catch(() => {

			})
	}

	const domainClick = () => {
		router.push('/my-domains-details')
	}
</script>
<template>
	<div class="container">
		<div class="top-title">
			我的域名
		</div>
		<div class="top-area flex-between">
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-tixianjilu"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">持有中</div>
					<div class="area-item-val">95</div>
				</div>
			</div>
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-jijiangdaoqi"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">即将到期</div>
					<div class="area-item-val">17</div>
				</div>
			</div>
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-Icon_yingjiwuziku"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">已到期</div>
					<div class="area-item-val">5</div>
				</div>
			</div>
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-minus"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">限制中</div>
					<div class="area-item-val">2</div>
				</div>
			</div>
		</div>
		<div class="table-box">
			<div class="table-tool">
				<div class="tool-left">
					<el-button @click="reset">重置条件</el-button>
					<el-date-picker v-model="form.date" type="daterange" range-separator="至"
						style="margin-left: 10px;width: 250px;" start-placeholder="开始日期"
						end-placeholder="结束日期"></el-date-picker>
					<el-select v-model="form.template" placeholder="选择模版" style="width: 200px;margin-left: 10px;"
						clearable>
						<el-option label="模版一" value="mb1"></el-option>
						<el-option label="模版二" value="mb2"></el-option>
						<el-option label="未设置模版" value="mb0"></el-option>
					</el-select>
				</div>
				<div class="tool-right">
					<div class="wrapdmTextarea">
						<div class="textarea-warp" style="z-index: 200; top: 0;">
							<div class="textarea-suffix">
								<img src="../../assets/img/search.png" alt="" />
							</div>
							<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea" name="domain"
								@focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''"
								style="overflow-y: auto;" v-model="form.nameStr"></textarea>
						</div>
					</div>
				</div>
			</div>
			<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
				style="width: 100%" show-overflow-tooltip>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column prop="name" label="域名" width="200">
					<template #default="scope">
						<el-link @click="domainClick"><span class="warn">{{scope.row.name}}</span></el-link>
					</template>
				</el-table-column>
				<el-table-column prop="reg_time" label="注册时间" sortable width="120">
				</el-table-column>
				<el-table-column prop="end_time" label="到期时间" sortable width="120">
				</el-table-column>
				<el-table-column prop="registrar" align="center" width="130">
					<template #header>
						<el-select v-model="form.registrar" placeholder="注册商" style="width: 100px" clearable>
							<el-option label="190vip" value="190vip"></el-option>
							<el-option label="ename" value="ename"></el-option>
							<el-option label="tencent" value="tencent"></el-option>
							<el-option label="netcn" value="netcn"></el-option>
							<el-option label="xw" value="xw"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="holding_status" width="140">
					<template #header>
						<el-select v-model="form.holding_status" placeholder="持有状态" style="width: 110px" clearable>
							<el-option label="正常" :value="0"></el-option>
							<el-option label="即将到期" :value="1"></el-option>
							<el-option label="续费期" :value="2"></el-option>
							<el-option label="赎回期" :value="3"></el-option>
							<el-option label="赎回中" :value="4"></el-option>
							<el-option label="已删除" :value="5"></el-option>
						</el-select>
					</template>
					<template #default="scope">
						<span v-if="scope.row.holding_status == 0" class="td-success">正常</span>
						<span v-if="scope.row.holding_status == 1" class="td-warn">即将到期</span>
						<span v-if="scope.row.holding_status == 2" class="td-error">续费期</span>
						<span v-if="scope.row.holding_status == 3" class="td-error">赎回期</span>
						<span v-if="scope.row.holding_status == 4" class="td-error">赎回中</span>
						<span v-if="scope.row.holding_status == 5" class="td-purple">已删除</span>
					</template>
				</el-table-column>
				<el-table-column prop="transaction_status" width="130">
					<template #header>
						<el-select v-model="form.transaction_status" placeholder="交易状态" style="width: 100px" clearable>
							<el-option label="可交易" :value="0"></el-option>
							<el-option label="出售中" :value="1"></el-option>
							<el-option label="PUSH中" :value="2"></el-option>
							<el-option label="转出中" :value="3"></el-option>
							<el-option label="过户中" :value="4"></el-option>
							<el-option label="释放中" :value="5"></el-option>
							<el-option label="限制中" :value="6"></el-option>
							<el-option label="保护中" :value="7"></el-option>
						</el-select>
					</template>
					<template #default="scope">
						<span v-if="scope.row.transaction_status == 0" class="td-success">可交易</span>
						<span v-if="scope.row.transaction_status == 1" class="td-purple">出售中</span>
						<span v-if="scope.row.transaction_status == 2" class="td-purple">PUSH中</span>
						<span v-if="scope.row.transaction_status == 3" class="td-purple">转出中</span>
						<span v-if="scope.row.transaction_status == 4" class="td-purple">过户中</span>
						<span v-if="scope.row.transaction_status == 5" class="td-purple">释放中</span>
						<span v-if="scope.row.transaction_status == 6" class="td-gray">限制中</span>
						<span v-if="scope.row.transaction_status == 7" class="td-purple">保护中</span>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" align="center"></el-table-column>
				<el-table-column label="操作" align="center" width="250">
					<template #default="scope">
						<div class="operate-btns" v-if="scope.row.holding_status == 2">
							<el-button link>立即续费</el-button>
						</div>
						<div class="operate-btns" v-if="scope.row.holding_status == 1 || scope.row.holding_status == 0">
							<el-button link>管理</el-button>
							<el-button link>续费</el-button>
							<el-button link>出售</el-button>
							<el-button link>PUSH</el-button>
							<el-button link @click="handleRemark(scope.row,scope.index)">备注</el-button>
						</div>
						<div class="operate-btns"
							v-if="scope.row.holding_status == 0 && scope.row.transaction_status == 2 || scope.row.holding_status == 0 && scope.row.transaction_status == 6">
							<el-button link>whois查询</el-button>
						</div>
						<div class="operate-btns" v-if="scope.row.holding_status == 3 || scope.row.holding_status == 4">
							<el-button link>我要赎回</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="table-tool table-tool-bottom">
				<div class="tool-left">
					<span class="selected">
						搜索结果共{{total}}条，已选择{{multipleSelection.length}}条 ，
					</span>
					<el-select v-model="form.operate" placeholder="选择操作" clearable
						style="width: 100px;margin-right:15px;">
						<el-option label="导出选中" :value="0"></el-option>
						<el-option label="导出全部" :value="1"></el-option>
						<el-option label="DNS设置" :value="2"></el-option>
						<el-option label="域名解析" :value="3"></el-option>
						<el-option label="模版过户" :value="4"></el-option>
						<el-option label="批量续费" :value="5"></el-option>
						<el-option label="批量出售" :value="6"></el-option>
						<el-option label="批量PUSH" :value="7"></el-option>
						<el-option label="批量转出" :value="8"></el-option>
						<el-option label="批量备注" :value="9"></el-option>
						<el-option label="自动续费" :value="10"></el-option>
					</el-select>
					<el-button>批量操作</el-button>
				</div>
			</div>
			<div class="pager-box">
				<div class="pager-total"></div>
				<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
					:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<style scoped lang='scss'>
	.table-box {
		background: #FFFFFF;
		box-shadow: 0px 0px 14px 0px #00000017;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 20px;
	}

	.table-tool-bottom {
		padding: 12px 0;
		border-bottom: 1px solid #ebeef5;
	}

	.table-tool-bottom .tool-right {
		padding-right: 98px;
	}

	.table-tool-bottom .tool-right span {
		display: inline-block;
		margin-right: 10px;
	}
</style>